<template>
  <div>
    <!-- 标签 -->
    <van-tabs class="bbbb" v-model="active">
      <van-tab v-for="(item, index) in arrs" :title="item.name" :key="index">
        <TuiJianVue v-if="active == 0" />
        <!-- 其他新闻 -->
        <QiTaVue
          v-for="(item2, index) in xiaoarrs"
          :key="index"
          :content="item2"
          :classification="item.name"
        ></QiTaVue>
      </van-tab>
    </van-tabs>
    <div class="aaaccc">
      <van-icon name="more-o" />
      <van-icon name="bullhorn-o" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import QiTaVue from "./Home/QiTa.vue";
import TuiJianVue from "./Home/TuiJian.vue";
export default {
  name: "Home",
  data() {
    return {
      arrs: [
        { name: "推荐" },
        { name: "要闻" },
        { name: "思想" },
        { name: "主题教育" },
        { name: "亮点" },
        { name: "本地" },
        { name: "综合" },
        { name: "县级融媒" },
        { name: "实播中国" },
        { name: "快闪" },
      ],
      xiaoarrs: [],
      active: 0,
    };
  },
  mounted() {
    axios.get("http://localhost:8080/journalism/journalismall").then((res) => {
      res = res.data;
      if (this.active == 0) {
        this.xiaoarrs = res.data;
      } else {
        this.xiaoarrs = res.data.filter((tim) => {
          let a = tim.type;
          let b = this.arrs[this.active].name;
          console.log(a, ":", b);
          return a == b;
        });
      }
    });
  },
  watch: {
    active() {
      axios
        .get("http://localhost:8080/journalism/journalismall")
        .then((res) => {
          res = res.data;
          if (this.active == 0) {
            this.xiaoarrs = res.data;
          } else {
            this.xiaoarrs = res.data.filter((tim) => {
              let a = tim.type;
              let b = this.arrs[this.active].name;
              console.log(a, ":", b);
              return a == b;
            });
          }
        });
    },
  },
  components: {
    TuiJianVue,
    QiTaVue,
  },
};
</script>

<style scoped>
.aaaccc {
  width: 3em;
  height: 40px;
  background-color: rgb(255, 255, 255);
  font-size: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  right: 0px;
  top: 60px;
}
.bbbb {
  position: relative;
}
</style>